<template>
  <div class="tuan">
    <div v-for="i in arr">
      <div>
        <img :src="i.img" style="width:100%;" />
      </div>
      <div style="padding:10px 0px;font-size:18px;background:#f4f4f4;">
        {{i.title}}
        <p style="display: inline-block;font-size: 13px;color: #696969;">优秀设计师</p>
      </div>
      <div style="padding:6px 0px;font-size:12px;margin-top:3px;background:#f4f4f4">
        经验：
        <span style="color:#3EC9AD;">{{i.nian}}年</span> 代表作：
        <span>{{i.jian}}件</span>
      </div>
      <div class="bvc"><a style="color: #fff;" :href="'#/an/'+i.zuo">查看TA的案例</a></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        {
          img:
            "https://ccdn.goodq.top/caches/31d77848c79d76c10027e5f47157bcf2/aHR0cDovLzU3NWU1YjM1YzRlZTcudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNi8wNi84MThjMDc3Nzc1MzY3YzZlYmQ0MGFiYjk1MDUxN2ZiOC5qcGc_p_p100_p_3D.m.jpg",
          title: "张媛",
          nian: "8",
          jian: "3",
          zuo:'案例展示_8'
        },
        {
          img:
            "https://ccdn.goodq.top/caches/31d77848c79d76c10027e5f47157bcf2/aHR0cDovLzU3NWU1YjM1YzRlZTcudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNi8wNi82NDQ0MjZhYWEwYjgzMmJkMTk4ZTRhMzliNzlmMjU2My5qcGc_p_p100_p_3D.m.jpg",
          title: "张媛",
          nian: "8",
          jian: "3",
          zuo:'案例展示_4'
        },
        {
          img:
            "https://ccdn.goodq.top/caches/31d77848c79d76c10027e5f47157bcf2/aHR0cDovLzU3NWU1YjM1YzRlZTcudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNi8wNi84YTQ1MTAxZjg0ZDliMjA0YjVhMzY0MTBjYjQ2ZDg0Yi5qcGc_p_p100_p_3D.m.jpg",
          title: "张媛",
          nian: "8",
          jian: "3",
          zuo:'案例展示_4'
        },
        {
          img:
            "https://ccdn.goodq.top/caches/31d77848c79d76c10027e5f47157bcf2/aHR0cDovLzU3NWU1YjM1YzRlZTcudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNi8wNi85OWM5NGFhM2RhZTYxMDdhNmQxMzQzMmI1MjU2ZWY0NS5qcGc_p_p100_p_3D.m.jpg",
          title: "张媛",
          nian: "8",
          jian: "3",
          zuo:'案例展示_7'
        },
        {
          img:
            "https://ccdn.goodq.top/caches/31d77848c79d76c10027e5f47157bcf2/aHR0cDovLzU3NWU1YjM1YzRlZTcudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNi8wNi81NWYwN2M2MGMzZjgwMTAxYTQ3NjA3N2UxNTIxYTU4Ni5qcGc_p_p100_p_3D.m.jpg",
          title: "张媛",
          nian: "8",
          jian: "3",
          zuo:'案例展示_2'
        },
        {
          img:
            "https://ccdn.goodq.top/caches/31d77848c79d76c10027e5f47157bcf2/aHR0cDovLzU3NWU1YjM1YzRlZTcudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNi8wNi8xYmJhNWRmNTQ1MWMzNDY2OTljZDY0ZDYxMzhiZGU0Mi5qcGc_p_p100_p_3D.m.jpg",
          title: "张媛",
          nian: "8",
          jian: "3",
          zuo:'案例展示_7'
        }
      ]
    };
  }
};
</script>

<style>
.tuan {
  padding: 0px 15px 34px 15px;
  box-sizing: border-box;
  text-align: center;
}
.bvc {
  padding: 11px 16px;
  width: 100%;
  background-color: rgb(62, 201, 173);
  color: #fff;
  box-sizing: border-box;
  font-size: 15px;
  border: 1px solid rgb(62, 201, 173);
}
.bvc:hover {
  background: rgb(153, 219, 200);
  transition: 0.3s;
}
</style>